<template>
	<scroll-view scroll-y="scroll-y">
	<view class="container">
		
			<view class="card">
		      <view>泉州风光</view>
		    <view class="smart-padding-wrap">
		      <swiper circular indicator-dots :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
		        <swiper-item>
		        <image  src="/static/city1.png" mode="aspectFill"></image>
		        </swiper-item>
		        <swiper-item>
		          <image  src="/static/city2.jpg" mode="aspectFill"></image>
		        </swiper-item>
		        <swiper-item>
		          <image  src="/static/city3.jpg" mode="aspectFill"></image>
		        </swiper-item>
		      </swiper>
		    </view>
			</view>
			
			<view class="card"> 
			        <text class="section-title">城市介绍</text>
			       <view class="x">泉州是国务院首批公布的24个历史文化名城之一，是古代海上丝绸之路起点，宋元时期被誉为“东方第一大港。</view>
				   <view class="x">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</view>
				  <view class="x">特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</view>
			</view>
			
			
			<view class="card">
			      <text class="section-title">探索进度</text>
			      <progress :percent="60" show-info stroke-width="12" />
			    </view>
			<view class="card">
			      <text class="section-title">城市选择</text>
			      <picker-view
			        class="picker-view"
			        :value="pickerValue"
			        :indicator-style="indicatorStyle"
			        :indicator-class="indicatorClass"
			        @change="onPickerChange">
					
			        <picker-view-column>
			          <view v-for="province in provinces" :key="province">
			            {{ province }}
			          </view>
			        </picker-view-column>
			        <picker-view-column>
			          <view v-for="city in cities" :key="city">
			            {{ city }}
			          </view>
			        </picker-view-column>
			        <picker-view-column>
			          <view v-for="area in areas" :key="area">
			            {{ area }}
			          </view>
			        </picker-view-column>
			      </picker-view>
			    </view>
			
			<view class="card">
			      <text class="section-title">偏好设置</text>
			      
			      <view class="preference-item">
			        <text>出行方式：</text>
			        <radio-group @change="onTravelModeChange">
			          <label v-for="mode in travelModes" :key="mode.value">
			            <radio :value="mode.value" :checked="mode.value === travelMode" />{{ mode.label }}
			          </label>
			        </radio-group>
			      </view>
			      
			      <view class="preference-item">
			        <text>显示推荐景点：</text>
			        <switch :checked="showRecommend" @change="onShowRecommendChange" />
			      </view>
			      
			      <view class="preference-item">
			        <text>探索半径：{{ radius }}km</text>
			        <slider
			          :value="radius"
			          @change="onRadiusChange"
			          min="1"
			          max="20"
			          show-value
			        />
			      </view>
			    </view>
			
			<view class="card">
			      <text class="section-title">媒体展示</text>
			      <video
			        class="video"
			        :src="videoSrc"
			        controls
			        poster="/static/video-poster.jpg"
			      ></video>
			    </view>
			
	</view>
	</scroll-view>
</template>
<script>
export default {
  data() {
    return {
      indicatorDots: true, 
      autoplay: true, 
      interval: 1500, 
      duration: 500, 
		provinces: ['福建省', '浙江省', '广东省'],
		      cities: ['泉州市', '杭州市', '广州市'],
		      areas: ['鲤城区', '西湖区', '天河区'],
		      pickerValue: [0, 0, 0],
		      indicatorStyle: 'height: 50px;',
		      indicatorClass: 'picker-indicator',
		      travelModes: [
		        { label: '公交', value: 'bus' },
		        { label: '自驾', value: 'self-driving' },
		        { label: '步行', value: 'walk' },
		      ],
		      travelMode: 'bus',
		      showRecommend: true,
		      radius: 10,
		      videoSrc: '/static/city-video.mp4',
		    };
  },
   methods: {
     onPickerChange(e) {
       this.pickerValue = e.detail.value;
     },
     onTravelModeChange(e) {
       this.travelMode = e.detail.value;
     },
     onShowRecommendChange(e) {
       this.showRecommend = e.detail.value;
     },
     onRadiusChange(e) {
       this.radius = e.detail.value;
     },
   },
 };
</script>

<style>

</style>